<template>
<div>
  <h1 style="text-align:center">城市查找页面</h1>
  <div>

  </div>
  <van-index-bar :index-list="indexList">
    <van-index-anchor index="定位">定位城市</van-index-anchor>
    <div class="city" >深圳</div>


    <van-index-anchor index="最近">最近访问城市</van-index-anchor>
    <div class="city" v-if="recent_city && recent_city.length!=0"> 深圳</div>
    <span style="display:block ;height: 28px;line-height: 28px;
     margin-left:10px; font-size: 12px; 
     padding: 4px 6px; margin: 6px;" v-else x>最近无访问的城市</span>

    <van-index-anchor index="热门">热门城市</van-index-anchor>
    <!-- <van-cell title="hot_city" /> -->
    <div class="city" v-for="item in hot_city" :key="item.index">{{item}}</div>
    <!-- <van-cell class="city" v-for="item in hot_city" :key="item.index" :title="item" /> -->
    
    <!-- <van-cell v-for="(it,inde) in hot_city" :key="inde" :title="it" /> -->
    <!-- <van-cell v-for="(item,index) in hot_city" :key="index" :title="item" /> -->
   

    <template v-for="(item,index) in citylist" >
      <van-index-anchor :key="index" :index="item.initial" />
      <van-cell 
      v-for="(i,ind) in item.list" 
      :key="index+'-'+ind" 
      :title="i.name" 
      />
    </template>
  
  </van-index-bar>
</div>

</template>

<script>
export default {
  name:"CityList",
  data(){
    return {
      citylist:[],
      indexList:[
        'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'
      ],
      hot_city:['上海','北京','广州','深圳','武汉','天津','西安','南京','杭州','成都','重庆'],
      local_city:'深圳',
      recent_city:[1]
    };
  },
  mounted(){
    this.$axios.get("./json/city.json").then(
      (res)=>{
        console.log(res.data);
        if(res && res.status == 200){
          this.citylist = res.data.city
        }
      }
    )
  }
}
</script>

<style lang="less" scoped>
  div{
    text-align: left;
  }
  .city{
    display: inline-block;
    color:black;
    width:24%;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    text-align: center;
    padding: 4px 6px;
    background-color: #fff;
    border: 1px solid rgb(230, 230, 230);
    margin: 6px;
    border-radius: 4px;
  }
  
</style>